<template>
  <div class="app-container">
    <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="收款记录" name="skjl">
       <!-- <receipt-list ref="listRes"/>-->
        <pay-demand ref="listRes"/>
      </el-tab-pane>
      <el-tab-pane label="费用明细" name="fymx">
        <rule-cost-list ref="costRef"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import ReceiptList from "./receiptList";
  import RuleCostList from "./ruleCostList";
  import PayDemand from "@/views/payfee/tollCenter/printTemplate/PayDemand"

  export default {
    name: "ReceiptForm",
    components: {ReceiptList,RuleCostList,PayDemand},
    data() {
      return {
        tabPosition: 'top',
        activeName:'skjl',
        currentOptions:[]
      };
    },
    created() {

    },
    methods: {
      init(options){
        this.activeName = 'skjl'
        this.currentOptions = options
        this.$refs.listRes.init(options)
      },
      handleClick(tab, event){
        if(this.activeName === 'skjl'){
          this.$refs.listRes.init(this.currentOptions)
        }else if(this.activeName === 'fymx'){
          this.$refs.costRef.init(this.currentOptions)
        }
      }
    }
  };
</script>
